<template>
    <Row class="margin-top-10">
        <Col span="24">
        <Card>
            <Modal
                    v-model="showModal"
                    title="添加肥料"
                    ok-text="保存"
                    @on-ok="addFert">
                <Form :model="newFert" :label-width=100>
                    <FormItem label="肥料名称：">
                        <Input v-model="newFert.name" placeholder="肥料名称"></Input>
                    </FormItem>
                    <FormItem label="肥料分类：">
                        <Cascader :data="soilClassifyData" v-model="newFert.type"></Cascader>
                    </FormItem>
                    <FormItem label="N 含量（%）：">
                        <InputNumber :max=100 :min=0 v-model="newFert.n"></InputNumber>
                    </FormItem>
                    <FormItem label="P 含量（%）：">
                        <InputNumber :max=100 :min=0 v-model="newFert.p"></InputNumber>
                    </FormItem>
                    <FormItem label="K 含量（%）：">
                        <InputNumber :max=100 :min=0 v-model="newFert.k"></InputNumber>
                    </FormItem>
                </Form>
            </Modal>
            <Row slot="title" type="flex" align="middle">
                <Col span="16">
                <Button type="info" icon="plus" @click="add">添加</Button>
                </Col>
                <Col span="8">
                <div align="right">
                    <Input v-model="searchSoilName">
                    <span slot="prepend">肥料名称：</span>
                    <Button slot="append" icon="ios-search"></Button>
                    </Input>
                </div>
                </Col>
            </Row>
            <div class="edittable-table-height-con">
                <Table border :columns="columnsList" :data="tableData"></Table>
            </div>
            <div align="right">
                <Page :total=10 show-elevator></Page>
            </div>
        </Card>
        </Col>
    </Row>
</template>
<style>
    body {
        background-color: #ff0000;
    }
</style>
<script>
    import EditableTable from '../../my_components/editable_table/editableTable.vue';
    import {getSoilClassify} from '../../../api'
    import Cookies from 'js-cookie'

    export default {
        components: {
            EditableTable
        },
        data() {
            return {
                showModal: false,
                searchSoilName: '',//搜索的肥料名称
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '肥料名称',
                        align: 'center',
                        key: 'name',
                        editable: true
                    },
                    {
                        title: '肥料分类',
                        key: 'type',
                        align: 'center',
                        editable: true
                    },
                    {
                        title: 'N 含量（%）',
                        align: 'center',
                        key: 'n',
                        editable: true
                    },
                    {
                        title: 'P 含量（%）',
                        align: 'center',
                        key: 'p',
                        editable: true
                    },
                    {
                        title: 'K 含量（%）',
                        align: 'center',
                        key: 'k',
                        editable: true
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 150,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.editFertData(params)
                                        }
                                    },
                                }, "编辑"),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteFertData(params.row, params.index)
                                        }
                                    },
                                }, "删除")
                            ])
                        }
                    }
                ],
                tableData: [
                    {
                        name: '尿素',
                        type: '有机肥',
                        n: 46,
                        p: 0,
                        k: 0
                    }
                ],
                modal1: false,
                modalType: "add",//编辑状态
                choseRowIndex: -1,//选中的行
                newFert: {
                    name: '',
                    type: [],//肥料分类选择
                    n: 0,
                    p: 0,
                    k: 0
                },
                soilClassifyData: [],//肥料分类
            };
        },
        created() {
            this.getData();
        },
        methods: {
            clearData: function () {
                this.newFert.name = '';
                this.newFert.type = '';
                this.newFert.soilClassifyValues = [];//肥料分类选择
                this.newFert.n = '';
                this.newFert.p = '';
                this.newFert.k = '';
            },
            add: function () {
                this.clearData();
                this.modalType = 'add';
                this.showModal = true;
            },
            editFertData(params) {
                var rowData = params.row;
                this.choseRowIndex=params.index;
                this.modalType = 'edit';
                //赋值
                this.newFert.name = rowData.name;
                this.newFert.type = rowData.type.split('/')
                this.newFert.n = rowData.n;
                this.newFert.p = rowData.p;
                this.newFert.k = rowData.k;
                this.showModal=true;
            },
            deleteFertData(row, index) {
                this.tableData.splice(index, 1)
            },
            addFert() {
                var type='';
                this.newFert.type.forEach((item,index)=>{
                    type=type+item
                    if(index<this.newFert.type.length-1){
                        type=type+'/'
                    }
                })
                let insertData = {
                    name: this.newFert.name,
                    type: type,
                    n: this.newFert.n,
                    p: this.newFert.p,
                    k: this.newFert.k
                }
                if (this.modalType == 'add') {
                    this.tableData.push(insertData)
                }else {
                    this.$set(this.tableData,this.choseRowIndex,insertData)
                }
            },
        },
        created() {
            let params = {
                access_token: Cookies.get('access_token'),
            }
            getSoilClassify(params)
                .then(res => {
                    this.soilClassifyData = res;
                })
        }

    }
</script>

